<div class="container mt-4">
  <div class="card">
    <div class="card-body">
      <h4 class="header-title">订单管理表</h4>

      <table id="basic-datatable" class="table dt-responsive nowrap w-100">
        <thead>
          <tr>
            <th>订单编号</th>
            <th>用户名</th>
            <th>商品信息</th>
            <th>总金额</th>
            <th>收货信息</th>
            <th>订单状态</th>
            <th>更新时间</th>
            <th>物流信息</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="knowledge-table-body">
          <!-- JS 渲染 -->
        </tbody>
      </table>

      <!-- 用户编辑模态框 -->
      <div
        class="modal fade"
        id="orderModal"
        tabindex="-1"
        aria-labelledby="orderModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-body">
              <form id="orderForm">
                <div class="mb-3">
                  <label for="orderId" class="form-label">订单编号</label>
                  <input
                    type="text"
                    class="form-control"
                    id="orderId"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label for="userName" class="form-label">用户名</label>
                  <input
                    type="text"
                    class="form-control"
                    id="userName"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label for="totalAmount" class="form-label">总金额</label>
                  <input
                    type="text"
                    class="form-control"
                    id="totalAmount"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label for="createTime" class="form-label">创建时间</label>
                  <input
                    type="text"
                    class="form-control"
                    id="createTime"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label for="orderStatust" class="form-label">订单状态</label>
                  <select class="form-select" id="orderStatust" required>
                    <option value="待发货">待发货</option>
                    <option value="已发货">已发货</option>
                    <option value="已揽收">已揽收</option>
                    <option value="运输中">运输中</option>
                    <option value="派送中">派送中</option>
                    <option value="待收货">待收货</option>
                    <option value="已签收">已签收</option>
                  </select>
                </div>

                <div class="mb-3">
                  <label for="trackingNumber" class="form-label"
                    >物流单号</label
                  >
                  <input
                    type="text"
                    class="form-control"
                    id="trackingNumber"
                    required
                  />
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="saveUserBtn">
                保存
              </button>
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 删除确认 Modal -->
      <div
        class="modal fade"
        id="deleteConfirmModal"
        tabindex="-1"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header bg-danger text-white">
              <h5 class="modal-title">确认删除</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="关闭"
              ></button>
            </div>
            <div class="modal-body">
              <p>你确定要删除该订单吗？此操作无法撤销。</p>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                取消
              </button>
              <button
                type="button"
                id="confirmDeleteBtn"
                class="btn btn-danger"
              >
                确定删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
